<template>
  <!-- 个性信息界面 -->
  <div>
    <van-nav-bar title="个人资料" left-arrow @click-left="exit" />
    <van-cell title="头像">
      <van-uploader v-model="fileList" multiple :max-count="1" preview-size="40px" :after-read="upload_img" upload-text
        @delete="delect_img">
      </van-uploader>
    </van-cell>

    <van-cell title="姓名" is-link :value="data.name" @click="showPopup(0)" />
    <van-cell title="性别" is-link :value="data.gender" @click="showPopup(1)" />
    <van-cell title="生日" is-link :value="data.birthday" @click="showPopup(2)" />
    <van-cell title="小米ID" :value="data.id" />
    <br>
    <van-cell title="修改密码" is-link @click="showPopup(3)" />
    <van-cell title="收货地址" is-link to="/address" />
    <van-cell title="修改邮箱" is-link @click="showPopup(4)" />
    <van-cell title="修改支付密码" is-link @click="showPopup(5)" />
    <br><br>
    <!-- 修改姓名功能 -->
    <van-popup v-model="show[0]" position="bottom" :style="{ height: '60%'}">
      <van-nav-bar title="小米昵称" left-text="取消" right-text="保存" @click-left="onClickLeft" @click-right="keep" />
      <van-field v-model="input" rows="1" autosize placeholder="请输入用户名" />
    </van-popup>
    <!-- 修改性别功能 -->
    <van-popup v-model="show[1]" position="bottom" :style="{ height: '60%'}">
      <van-picker show-toolbar title="性别" :columns="columns" @confirm="keep1" @cancel="onClickLeft" />
    </van-popup>
    <!-- 修改生日功能 -->
    <van-popup v-model="show[2]" position="bottom" :style="{ height: '60%'}">
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
        @confirm="keep2" @cancel="onClickLeft" />
    </van-popup>
    <!-- 修改密码功能 -->
    <van-popup v-model="show[3]" position="bottom" :style="{ height: '60%'}" @close="ret">
      <van-nav-bar title="修改密码" left-text="取消" @click-left="onClickLeft" />
      <div v-if="sta==0">
        <van-field v-model="tel" maxlength="11" :formatter="formatter" placeholder="请输入手机号" clearable />
        <van-field v-model="sms" center clearable maxlength="6" :formatter="formatter" placeholder="请输入验证码">
          <template #button v-if="sta==0">
            <van-button size="small" type="primary" @click="yanzeng">发送验证码</van-button>
          </template>
        </van-field>
        <br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="next(0)">下一步</van-button>
          </van-col>
        </van-row>
      </div>
      <div v-if="sta==1">
        <van-field v-model="pass1" type="password" placeholder="请输入密码" clearable /><br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="next(1)">下一步</van-button>
          </van-col>
        </van-row>
      </div>
      <div v-if="sta==2">
        <van-field v-model="pass" type="password" placeholder="请输入密码" clearable :error-message="error" @blur="pass_ce"
          @focus="qin" />
        <van-field v-model="checkPass" type="password" center clearable placeholder="请确认密码" :error-message="error1"
          @blur="checkPass_ce" @focus="qin1">
        </van-field><br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="keep3">保存</van-button>
          </van-col>
        </van-row>
      </div>
      <p class="two" @click="change">切换验证方式 ></p>
    </van-popup>
    <!-- 修改邮箱功能 -->
    <van-popup v-model="show[4]" position="bottom" :style="{ height: '60%'}" @close="ret">
      <van-nav-bar title="修改邮箱" left-text="取消" @click-left="onClickLeft" />
      <div v-if="sta1==0">
        <van-field v-model="tel" maxlength="11" :formatter="formatter" placeholder="请输入手机号" clearable />
        <van-field v-model="sms" center clearable maxlength="6" :formatter="formatter" placeholder="请输入验证码">
          <template #button v-if="sta1==0 || sta1==2">
            <van-button size="small" type="primary" @click="yanzeng">发送验证码</van-button>
          </template>
        </van-field>
        <br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="next(0)">下一步</van-button>
          </van-col>
        </van-row>
      </div>
      <div v-if="sta1==1">
        <van-field v-model="pass1" type="password" placeholder="请输入密码" clearable /><br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="next(1)">下一步</van-button>
          </van-col>
        </van-row>
      </div>

      <div v-if="sta1==2">
        <van-field v-model="Email" type="text" placeholder="请输入邮箱" clearable />
        <br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="keep4">保存</van-button>
          </van-col>
        </van-row>
      </div>
      <p class="two" @click="change">切换验证方式 ></p>
    </van-popup>
    <!-- 修改支付密码功能 -->
    <van-popup v-model="show[5]" position="bottom" :style="{ height: '60%'}" @close="ret">
      <van-nav-bar title="修改支付密码" left-text="取消" @click-left="onClickLeft" />
      <div v-if="sta2==0">
        <van-field v-model="tel" maxlength="11" :formatter="formatter" placeholder="请输入手机号" clearable />
        <van-field v-model="sms" center clearable maxlength="6" :formatter="formatter" placeholder="请输入验证码">
          <template #button v-if="sta1==0 || sta1==2">
            <van-button size="small" type="primary" @click="yanzeng">发送验证码</van-button>
          </template>
        </van-field>
        <br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="next(0)">下一步</van-button>
          </van-col>
        </van-row>
      </div>
      <div v-if="sta2==1">
        <van-field v-model="pass1" type="password" placeholder="请输入密码" clearable /><br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="next(1)">下一步</van-button>
          </van-col>
        </van-row>
      </div>

      <div v-if="sta2==2">
        <van-field v-model="PaymentPassword" type="text" placeholder="请输入支付密码" clearable :formatter="formatter"
          maxlength="6" />
        <br>
        <van-row>
          <van-col :span="22" :offset="1">
            <van-button type="primary" round block @click="keep5">保存</van-button>
          </van-col>
        </van-row>
      </div>
      <p class="two" @click="change">切换验证方式 ></p>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Email: "", //修改信息时用于填写手机号的输入框
      pass1: "", //修改信息时用于验证密码的输入框
      tel: "", //修改信息时用于验证手机号的输入框
      sms: "", //修改信息时用于验证验证码的输入框
      PaymentPassword: "", //支付密码
      sta: 0, //修改密码信息时用于判断进度
      sta1: 0, //修改手机号信息时用于判断进度
      sta2: 0, //修改手机号信息时用于判断进度
      data: "", //数据库读取的用户信息
      fileList: [], //头像
      input: "", //修改用户名的输入框
      columns: ["男", "女"], //修改性别的选项
      minDate: new Date(1900, 0, 1), //修改生日的选项最低时间点
      maxDate: new Date(2021, 3, 29), //修改生日的选项最高时间点
      currentDate: new Date(), //修改生日的选项的结果
      pass: "", //修改密码时输入密码的输入框
      checkPass: "", //修改密码时再次确认密码的输入框
      error: "", //修改密码的错误提示
      error1: "", //修改密码的错误提示2
      show: [false, false, false, false, false, false], //打开弹窗的控制数据
    };
  },
  methods: {
    //头像删除
    delect_img() {
      this.data.img = "";
      this.axjx();
    },
    //头像上传
    upload_img(file) {
      console.log(file);
      // let that = this;
      let params = new FormData();
      params.append("file", file.file);
      params.append("data", JSON.stringify(this.data));
      let config = {
        headers: {
          //添加请求头
          "Content-Type": "multipart/form-data",
        },
      };
      console.log(params);
      this.axios
        .post(this.$url +"user_change", params, config)
        .then(({ data }) => {
          console.log("8888888888888");
          console.log(data);
          // that.fileList = [data.data];
        });
      console.log(this.fileList);
    },
    //退出弹框时恢复原状
    ret() {
      this.sms = "";
      this.tel = "";
      this.sta = 0;
      this.sra1 = 0;
      this.sra2 = 0;
      this.error = "";
      this.error1 = "";
    },
    //修改密码下一步
    next(index) {
      console.log(this.data);
      if (index == 0) {
        if (this.sms == "") {
          this.$toast.fail("请输入验证码");
        } else if (
          this.data.phone != this.tel &&
          this.data.phone != this.phone
        ) {
          this.$toast.fail("验证失败,请确认信息");
        } else {
          this.sta = 2;
          this.sta1 = 2;
          this.sta2 = 2;
        }
      } else {
        if (this.data.password == this.pass1) {
          this.sta = 2;
          this.sta1 = 2;
          this.sta2 = 2;
        } else {
          this.$toast.fail("验证失败");
        }
      }
    },
    //切换修改密码验证方式
    change() {
      if (this.sta == 0) {
        this.sta = 1;
      } else {
        this.sta = 0;
      }
    },
    //头部返回上一页
    exit() {
      this.$router.go(-1);
    },
    //修改弹窗的取消按钮
    onClickLeft() {
      this.show = [false, false, false, false, false, false];
    },
    //点击弹窗功能
    showPopup(index) {
      this.$set(this.show, index, !this.show[index]);
    },
    //姓名弹窗保存
    keep() {
      if (this.input != "") {
        this.data.name = this.input;
        this.axjx();
        this.show = [false, false, false, false, false, false];
      } else {
        this.$toast.fail("用户名不能为空");
      }
    },
    //性别弹窗保存
    keep1(value) {
      this.data.gender = value;
      this.axjx();
      this.show = [false, false, false, false, false, false];
    },
    //生日弹窗保存
    keep2() {
      this.data.birthday = this.currentDate.toLocaleDateString();
      this.axjx();
      this.show = [false, false, false, false, false, false];
    },
    //密码弹窗保存
    keep3() {
      if (
        this.pass != "" &&
        this.error == "" &&
        this.error1 == "" &&
        this.pass == this.checkPass
      ) {
        this.data.password = this.pass;
        this.axjx();
      } else {
        this.$toast.fail("修改失败");
      }
      this.pass = "";
      this.checkPass = "";
      this.show = [false, false, false, false, false, false];
    },
    //修改邮箱保存
    keep4() {
      if (this.Email != "" && this.error == "") {
        this.data.Email = this.Email;
        this.axjx();
      } else {
        this.$toast.fail("修改失败");
      }
      this.phone = "";
      this.show = [false, false, false, false, false, false];
    },
    //修改支付密码保存
    keep5() {
      if (this.PaymentPassword != "" && this.error == "") {
        this.data.PaymentPassword = this.PaymentPassword;
        this.axjx();
      } else {
        this.$toast.fail("修改失败");
      }
      this.PaymentPassword = "";
      this.show = [false, false, false, false, false, false];
    },
    // 过滤-只能输入数字
    formatter(value) {
      return value.replace(/[^0123456789]/g, "");
    },
    //自动生成验证码
    yanzeng() {
      let randomNum = ("000000" + Math.floor(Math.random() * 999999)).slice(-6);
      this.sms = randomNum;
    },
    //保存到数据库
    axjx() {
      let myurl = this.$url +"user_change";
      this.axios.post(myurl, { data: this.data }).then(
        (res) => {
          this.$toast.success("保存成功");
          this.getData();
          console.log(res);
        },
        (err) => {
          console.log("数据读取失败");
          console.log(err);
        }
      );
    },
    //密码输入检测
    pass_ce() {
      let reg = /^[\W\da-zA-Z_]{6,20}$/;
      if (!reg.test(this.pass)) {
        this.error = "请输入6--20位数字,字母,任意字符";
      }
    },
    //再次输入密码输入检测
    checkPass_ce() {
      if (this.pass != this.checkPass) {
        this.error1 = "二次密码不一样";
      }
    },
    //清空报错
    qin() {
      this.error = "";
    },
    qin1() {
      this.error1 = "";
    },
    //提示
    tishi() {
      this.$toast("该功能尚未完善");
    },
    getData() {
      let sta = localStorage.getItem("sta");
      sta = JSON.parse(sta);
      if (sta.sx == 1) {
        let myurl = this.$url +"user_login";
        this.axios.post(myurl, { user: sta.tel }).then(
          (res) => {
            if (res.data.data != "[]") {
              this.data = JSON.parse(res.data.data)[0];
              if (this.data.img != "") {
                this.fileList = [];
                this.fileList.push({
                  url: this.$url +"img/" + this.data.img,
                });
              }
            }
          },
          (err) => {
            console.log("数据读取失败");
            console.log(err);
          }
        );
      }
    },
  },
  //进入界面获取登录信息
  created() {
    this.getData();
  },
};
</script>

<style scoped>
h5 {
  padding-left: 4.3%;
  margin-bottom: 2%;
}
.one {
  text-align: center;
}
.two {
  text-align: center;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.3);
}
</style>